<template>
  <div class="goodsDetails">
    <div class="container">
      <div class="det_img">
        <img v-src="data.mainPic" alt="">
      </div>
      <div class="textBox flex flex-y-center">
        <div class="text">
          {{message}}
        </div>
      </div>
      <div :style="{backgroundColor:backgroundColor}"  class="btn flex flex-y-center flex-x-center"
           v-clipboard:copy="message"
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"
      >
          <span>{{btnText}}</span>
      </div>
      <div class="bottomText">
        <p>说明:</p>
        <p>在点击一键复制后，请打开淘宝购买</p>
        <p>若一键复制失败，请长按方框内文字全选复制拷贝</p>
      </div>
    </div>
  </div>
</template>
<script>
  import MDUtils from 'src/assets/js/md-utils'
  import {URI_TKL} from 'src/const/uri'
  export default {
    data(){
      return{
        message:'复制红框内信息打开→手掏APP←即可领YouHui券',
        btnText:'一键复制',
        backgroundColor:'#df7162',
        userId:MDUtils.getQueryParam('uId'),
        goodId:MDUtils.getQueryParam('gId'),
        data:[]
      }
    },
    created(){
      this.$ajax.post(URI_TKL,{
        uId:this.userId,
        goodId:this.goodId,
        promotionTypeId:MDUtils.is_ios()?2:3
      },(res)=>{
        this.data=res.data;
        this.message=`复制红框内信息打开→手掏APP←即可领YouHui券 ${this.data.tkl}`
      });
    },
    mounted() {
      let spinner = document.getElementsByClassName('spinner')[0];
      spinner.style.display = 'none';
    },
    methods:{
      onCopy(e){
        if(e.text){
          this.btnText='复制成功,打开【手淘】';
          this.backgroundColor=`rgb(125, 197, 125)`;
          setTimeout(()=>{
            this.btnText='一键复制';
            this.backgroundColor=`rgb(253, 100, 61)`;
          },1500)
        }
      },
      onError(e){
        alert('Failed to copy texts')
      }
    }

  }
</script>
<style lang="less" scoped>
  @import 'index';
</style>
